<template>
	<div v-if="selectedElements.length > 0" class="visual-editor-panel">
		<a-alert
			:message="`已选中 ${selectedElements.length} 个元素`"
			type="info"
			show-icon
			closable
			@close="clearAll"
			class="selected-elements-alert"
		>
			<template #description>
				<div class="selected-elements-list">
					<div
						v-for="element in selectedElements"
						:key="element.id"
						class="selected-element-item"
						@mouseenter="handleItemHover(element, true)"
						@mouseleave="handleItemHover(element, false)"
					>
						<div class="element-info">
							<a-tag color="blue" class="element-tag">{{ element.tagName }}</a-tag>
							<span v-if="element.className" class="element-class">{{ element.className }}</span>
							<span v-if="element.textContent" class="element-text" :title="element.textContent">{{
								element.textContent
							}}</span>
						</div>
						<a-button
							type="text"
							size="small"
							@click="removeElement(element.id)"
							class="remove-btn"
							:title="'移除 ' + element.tagName + ' 元素'"
						>
							<template #icon>
								<CloseOutlined />
							</template>
						</a-button>
					</div>
				</div>
			</template>
		</a-alert>
	</div>
</template>

<script setup lang="ts">
import { CloseOutlined } from '@ant-design/icons-vue'
import { type SelectedElement } from '@/composables/useVisualEditor'

interface Props {
	selectedElements: SelectedElement[]
}

interface Emits {
	(e: 'remove', elementId: string): void
	(e: 'clear'): void
	(e: 'hover', element: SelectedElement, isHover: boolean): void
}

defineProps<Props>()
const emit = defineEmits<Emits>()

const removeElement = (elementId: string) => {
	emit('remove', elementId)
}

const clearAll = () => {
	emit('clear')
}

const handleItemHover = (element: SelectedElement, isHover: boolean) => {
	emit('hover', element, isHover)
}
</script>

<style scoped lang="scss">
.visual-editor-panel {
	margin-bottom: 12px;
}

.selected-elements-alert {
	border: 1px solid #d9d9d9;
	border-radius: 6px;

	// 自定义 alert 样式
	:deep(.ant-alert-message) {
		font-weight: 600;
		color: #1890ff;
	}
}

.selected-elements-list {
	margin-top: 8px;
	max-height: 120px;
	overflow-y: auto;

	// 自定义滚动条样式
	&::-webkit-scrollbar {
		width: 4px;
	}

	&::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 2px;
	}

	&::-webkit-scrollbar-thumb {
		background: #c1c1c1;
		border-radius: 2px;

		&:hover {
			background: #a8a8a8;
		}
	}
}

.selected-element-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 10px;
	margin-bottom: 6px;
	background: #f5f5f5;
	border-radius: 6px;
	font-size: 12px;
	transition: all 0.2s ease;
	cursor: pointer;
	border: 1px solid transparent;

	&:hover {
		background: #e6f7ff;
		border-color: #91d5ff;
		transform: translateY(-1px);
		box-shadow: 0 2px 6px rgba(24, 144, 255, 0.15);

		.element-tag {
			background: #1890ff !important;
			color: white !important;
		}

		.element-class {
			color: #1890ff;
			font-weight: 600;
		}

		.remove-btn {
			color: #ff4d4f;
			background: rgba(255, 77, 79, 0.1);
		}
	}

	&:last-child {
		margin-bottom: 0;
	}

	&:active {
		transform: translateY(0);
		box-shadow: 0 1px 3px rgba(24, 144, 255, 0.1);
	}
}

.element-info {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 0;
}

.element-tag {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	padding: 2px 6px;
	min-width: auto;
	border-radius: 3px;
	transition: all 0.2s ease;
}

.element-class {
	color: #666;
	font-weight: 500;
	font-size: 11px;
	background: #f0f0f0;
	padding: 1px 4px;
	border-radius: 2px;
	transition: all 0.2s ease;
}

.element-text {
	color: #999;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 180px;
	font-size: 11px;
	font-style: italic;
}

.remove-btn {
	color: #bfbfbf;
	padding: 0;
	min-width: auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;

	&:hover {
		color: #ff4d4f !important;
		background: rgba(255, 77, 79, 0.15) !important;
		transform: scale(1.1);
	}

	&:active {
		transform: scale(0.95);
	}

	:deep(.anticon) {
		font-size: 10px;
	}
}

// 响应式适配
@media (max-width: 768px) {
	.selected-elements-list {
		max-height: 100px;
	}

	.selected-element-item {
		padding: 5px 8px;
		margin-bottom: 4px;
	}

	.element-text {
		max-width: 120px;
	}
}

// 暗色主题适配
@media (prefers-color-scheme: dark) {
	.selected-elements-alert {
		background: #1f1f1f;
		border-color: #434343;
	}

	.selected-element-item {
		background: #2a2a2a;
		color: #e0e0e0;

		&:hover {
			background: #1e3a5f;
			border-color: #4096ff;
		}
	}

	.element-class {
		background: #404040;
		color: #ccc;
	}

	.element-text {
		color: #888;
	}
}
</style>
